<template>
  <div class="rate-item">
    <img src="static/images/rate-bg1.jpg" class="img-item">
    <div class="data-item">
      <rate-detail :rateData="currData" :bgColor="bgColor" :titleColor="titleColor" :subTitle="subTitle"></rate-detail>
    </div>
  </div>
</template>
<script>
import RateDetail from './RateDetail'
export default {
  name: 'RateComponent',
  props: {
    dataArr: Array
  },
  data () {
    return {
      timer: null,
      pageIndex: 0,
      currData: null,
      bgColor: '#2174cc',
      titleColor: '#01cbfe',
      subTitle: '存款利率'
    }
  },
  computed: {
    pageTotal () {
      return this.dataArr.length
    }
  },
  components: {
    RateDetail
  },
  methods: {
    addIndex () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let this_ = this
      this.timer = setTimeout(function () {
        if (this_.pageIndex < this_.pageTotal - 1) {
          this_.pageIndex++
          this_.currData = this_.dataArr[this_.pageIndex]
        } else {
          clearTimeout(this.timer)
          this_.pageIndex = 0
          this_.$emit('changeIndex')
          return
        }
        this_.addIndex()
      }, 10000)
    }
  },
  mounted () {
  },
  activated () {
    this.currData = this.dataArr[this.pageIndex]
    this.addIndex()
  }
}
</script>
<style lang="stylus" scoped>
  .rate-item
    width: 1920px
    height: 1080px
  .img-item, .data-item
    position: absolute
    left: 0
    top: 0
    width: 1920px
    height: 1080px
</style>
